<script setup lang="ts">
import BtnWithDropdown from "@renderer/view/components/components/BtnWithDropdown.vue";
import { EnumOpType, EnumRotateSubType } from "@renderer/assets/types";

import { ref } from "vue";

enum EnumRotateIcon {
  defaultIcon = "mdi-rotate-right-variant",
  flipX = "mdi-flip-horizontal",
  flipY = "mdi-flip-vertical",
  rotate90 = "mdi-rotate-right-variant",
  rotate90CounterClockwise = "mdi-rotate-left-variant",
}

const items = [
  {
    type: EnumRotateSubType.flipX,
    icon: EnumRotateIcon.flipX,
    label: "水平翻转",
  },
  {
    type: EnumRotateSubType.flipY,
    icon: EnumRotateIcon.flipY,
    label: "垂直翻转",
  },
  {
    type: EnumRotateSubType.rotate90Clockwise,
    icon: EnumRotateIcon.rotate90,
    label: "旋转90度",
  },
  {
    type: EnumRotateSubType.rotate90CounterClockwise,
    icon: EnumRotateIcon.rotate90CounterClockwise,
    label: "逆时针旋转90度",
  },
];
const opSubType = ref('')

const activeIcon = ref(EnumRotateIcon.defaultIcon);

const handleClick = (opType: {
  type: EnumOpType;
  subType: EnumRotateSubType;
}) => {
  opSubType.value = opType.subType;
  switch (opType.subType) {
    case EnumRotateSubType.flipX:
      activeIcon.value = EnumRotateIcon.flipX;
      break;
    case EnumRotateSubType.flipY:
      activeIcon.value = EnumRotateIcon.flipY;
      break;
    case EnumRotateSubType.rotate90Clockwise:
      activeIcon.value = EnumRotateIcon.rotate90;
      break;
    case EnumRotateSubType.rotate90CounterClockwise:
      activeIcon.value = EnumRotateIcon.rotate90CounterClockwise;
      break;
    default:
      activeIcon.value = EnumRotateIcon.defaultIcon;
  }
};
</script>

<template>
  <btn-with-dropdown
    :icon="activeIcon"
    tips="rotate"
    :op-type="{
      type: EnumOpType.rotate,
      subType: opSubType,
    }"
    @btn-click="handleClick"
  >
    <template #dropdownSlot="{ handleChooseMenu }">
      <v-list density="compact">
        <v-list-item
          v-for="(item, index) in items"
          :key="index"
          :value="index"
          @click="handleChooseMenu(item)"
        >
          <div class="flex gap-x-[5px]">
            <v-icon :icon="item.icon"></v-icon>
            <span>{{ item.label }}</span>
          </div>
        </v-list-item>
      </v-list>
    </template>
  </btn-with-dropdown>
</template>

<style scoped></style>
